import React,{useEffect, useState,useCallback} from 'react'
import {View,Text,TouchableOpacity,StyleSheet,ImageBackground,FlatList} from 'react-native';
import '../../global';
import { Feather,AntDesign } from '@expo/vector-icons';
import { useSelector } from 'react-redux';
import { Audio } from 'expo-av';
import { useFocusEffect } from '@react-navigation/native';
import {useNum} from '../../context'
import AsyncStorge from '@react-native-async-storage/async-storage'

const getCurrentDay = () =>{
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = '0' + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate;
    }
    let currentdate = year + '-' + month + '-' + strDate;
    return currentdate;
}

const Words = ({navigation,route}) => {
    const li=useSelector(state=>state.list)
    const [list,setList]=useState(route.params.list);
    const [num,setNum] = useState(0);
    const [sound,setSound] = useState();
    const {num0,setNum0} = useNum();


    
    const playSound = async ()=>{
        console.log(list[num])
        let source = {uri:list[num].pron}
        const { sound } = await Audio.Sound.createAsync(source);
        setSound(sound);
        await sound.playAsync(); 
    }

    const Next = ({id})=>{
        if(num !=list.length-1){
            return (
                <TouchableOpacity style={{backgroundColor:'rgba(0,0,0,0.3)',width:'30%',height:'5%',borderRadius:20,borderColor:'rgba(255,255,255,0.4)',borderWidth:2,display:'flex',flexDirection:'row',justifyContent:'center',alignItems:'center',position:'absolute',bottom:changeH(170),right:changeW(50)}}
                    onPress={()=>{
                        fetch('https://wx.qasdwer.top:8080/home/putword',{
                              method:'put',
                              headers:{
                                'content-type':'application/json;charset=utf-8'
                              },
                              body:JSON.stringify({id:id,user_number:li.account})
                            })
                        
                            .catch((error)=>{
                                console.log("Error");
                                throw error;
                              });
                        setNum(num+1);
                        let date = getCurrentDay();
                        let obj = {
                            date:date,
                            num:num0+1
                        }
                        setNum0(num0+1)
                        AsyncStorge.setItem('words',JSON.stringify(obj))
                        
                    }}
                >
                    <Text style={{color:'white',fontSize:changeW(30)}}>下一个</Text>
                    </TouchableOpacity>
            )
        }
        else{
            return (
                <TouchableOpacity style={{backgroundColor:'rgba(0,0,0,0.3)',width:'30%',height:'5%',borderRadius:20,borderColor:'rgba(255,255,255,0.4)',borderWidth:2,display:'flex',flexDirection:'row',justifyContent:'center',alignItems:'center',position:'absolute',bottom:changeH(170),right:changeW(50)}}
                    onPress={()=>{
                        
                            navigation.navigate('Word');
                        
                    }}
                >
                    <Text style={{color:'white',fontSize:changeW(30)}}>完成</Text>
                    </TouchableOpacity>
            )
        }
    }
    return (
        <ImageBackground style={styles.imageBack} source={require('../../assets/image/65.webp')}>
            <View style={styles.backmodal}>
                <View style={{marginTop:changeH(80),marginLeft:changeW(30)}}>
                    <TouchableOpacity onPress={()=>navigation.navigate('Word')}>
                    <AntDesign name="left" size={30} color="white" />
                    </TouchableOpacity>
                
                </View>
                
                <View style={{marginTop:changeH(120),marginLeft:changeW(50)}}>
                    <Text style={{color:'white',fontSize:changeW(60)}}>{list[num].englishWord}</Text>
                    <View style={{display:'flex',flexDirection:'row',marginTop:changeH(20)}}>
                        <Feather name="volume-1" size={28} color="white" onPress={playSound}/>
                        <Text style={{color:'white',fontSize:changeW(25),marginLeft:changeW(10),marginTop:changeH(10)}}>/{list[num].pa}/</Text>
                    </View>
                    <Text style={{color:'white',fontSize:changeW(30),marginTop:changeH(25)}}>{list[num].chineseWord}</Text>
                    <View style={{backgroundColor:'rgba(0,0,0,0.3)',marginTop:changeH(30),borderRadius:30,width:'95%',padding:changeW(20),marginLeft:changeW(-15)}}>
                         <Text style={{color:'white',fontSize:changeW(30),marginTop:changeH(10)}}>例句一</Text>
                    <Text style={{color:'white',fontSize:changeW(28),marginTop:changeH(10)}}>{list[num].englishInstance1}</Text>
                    <Text style={{color:'white',fontSize:changeW(30),marginTop:changeH(25)}}>{list[num].chineseInstance1}</Text>
                   </View>
                   <View style={{backgroundColor:'rgba(0,0,0,0.3)',marginTop:changeH(30),borderRadius:30,width:'95%',padding:changeW(20),marginLeft:changeW(-15)}}>
                   <Text style={{color:'white',fontSize:changeW(30),marginTop:changeH(40)}}>例句二</Text>
                    <Text style={{color:'white',fontSize:changeW(28),marginTop:changeH(10)}}>{list[num].englishInstance2}</Text>
                    <Text style={{color:'white',fontSize:changeW(30),marginTop:changeH(25)}}>{list[num].chineseInstance2}</Text>
                    </View>
                </View>
                <Next id={list[num].id}/>
                    
            </View>
        </ImageBackground>
    )
}

const styles = StyleSheet.create({
    imageBack:{
        width:'100%',
        height:'100%'
    },
    backmodal:{
        width:'100%',
        height:'100%',
        backgroundColor:'rgba(0,0,0,0.54)'
    }
})

export default Words
